<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/summernote.css">
    
	<style>
        /* 调试用 */
        .talk { margin-top: 25px; }
        
        /* 占用空间 */
        .talk {
            display: flex;
        }
        .talk-content {
            min-height: 250px;
        }
        .talk-header, .talk-footer {
            height: 25px;
            max-height: 25px;
        }
        .talk-user-area {
            min-height: 200px;
        }
        /* 边框 */
        .talk { 
            border: 2px solid #A9CBEE; 
            border-radius: 3px; 
        }
        .talk-user-area { border-right: 1px solid #A9CBEE; }
        .talk-header {
            border-bottom: 1px solid #A9CBEE; 
        }
        .talk-footer { 
            border-top: 1px solid #A9CBEE;
        }
        .talk-user-face {
            width: 160px;
            margin-top: 15px;
            padding: 1px;
            border: 1px solid #ccc;
        }
        
        /* 用户信息 */
        .talk-user-area {
            background-color: #eff4fb;
        }
        .talk-user-name {
            text-align: center;
            font-size: 1.1em;
            padding: 5px;
            margin: 3px auto;
        }
        .talk-user-name:before {
            font-weight: bold;
            color: #A9CBEE;
            font-size: 1em;
            content: "> ";
        }
        .talk-user-name:after {
            font-weight: bold;
            color: #A9CBEE;
            font-size: 1em;
            content: " <";           
        }
        .talk-user-name:hover::before {
            margin-right: 3px;
        }
        .talk-user-name:hover::after {
            margin-left: 3px;
        }
        /* 用户信息详情 */
        .talk-user-detile {
            display: flex;
            margin-top:21px;
            font-size:12px;
            padding:0 9px;
        }
        .talk-user-left-detile {
            flex: 15px;
        }
        .talk-user-right-detile {
            flex: 1;
            text-align: center;
        }
        .talk-hr {
            margin-top: -2px;
            margin-bottom: 0;
            border-top: 1px;
            border-top-color: #a9cbee;
            border-top-style: solid;            
        }
        
        /* talk头部 */
        .talk-header {
            color: #999;
        }
        .talk-header-start {
            padding-left: 15px;
            line-height: 25px;
            height: 25px;
            font-size: 12px;
            margin-top: 1px;
            display: inline-block;
        }
        .talk-header-end {
            padding-right: 15px;
            line-height: 25px;
            height: 25px;
            font-size: 12px;
            margin-top: 1px;
            display: inline-block;
            float: right;       
            font-weight: bold;
        }
        
        /* talk主体 */
        .talk-content {
            padding: 5px 15px;
            font-size: 16px;
        }
        
        /* talk 尾部 */
        .talk-footer {
            color: #999;
        }
        .talk-footer-start {
            padding-left: 15px;
            line-height: 25px;
            height: 25px;
            font-size: 12px;
            margin-top: 2px;
            display: inline-block;            
        }
        .talk-footer-end {
            padding-right: 15px;
            color: #337ab7;
            float: right;
            line-height: 24px;
        }
        .talk-repay-button {
            cursor: pointer;
        }
        .talk-repay-button:hover, .talk-repay-button:focus {
            color: #23527c;
        }
        /* 文本编辑器 */
        .talk-editer {
            padding: 0;
            font-size: 16px;
        }        
        .talk-editer .note-editor {
            margin: 10px 10px 0 10px;
        }
        .talk-editer .note-toolbar  {
            background-color: #eff4fb;
            border-color: #a9cbee;
        }
        .talk-editer .note-btn {
            border-color: #a9cbee;         
        }
        .talk-editer .note-resizebar {
            background-color: #eff4fb;
        }
        /* input高度 */
        .form-control {
            height: 39px;
        }
        /* 字体二级菜单高度 */
        .dropdown-fontname {
            max-height: 240px;
            overflow-y: scroll;
        }        
        /* 文本编辑器中的图片附加样式 */
        .note-editable img {
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 2px;
        }
        /* 文本编辑器分割线 */
        .note-editer-hr {
            border-top: 1px;
            border-top-color: #a9cbee;
            border-top-style: solid;     
            margin-bottom: 20px;          
        }
        
        /* 文本编辑器标题 */
        .note-editer-title-container {
            padding: 10px 25px 0 25px;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            display: flex;
        }
        .note-editer-title-label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
            line-height: 25px;
            flex: 65px;
            font-size: 25px;
            margin-top: 5px;
        }
        .note-editer-title {
            width: 100%;
            border: 1px solid #A9CBEE;
            border-radius: 3px;
            padding: 2px 10px;
            line-height: 25px;
            font-size: 25px;
        }
        /* 遮罩层 */
        .talk-editer-cover {
            width: 100%;
            height: 371px;
            position: absolute;
            top: 0;
            background-color: rgba(250,235,215,0.5);
            border: 5px dashed #A9CBEE;
            border-radius: 3px;
        }
        .talk-editer-cover-msg {
            font-size: 24px;
            text-align: center;
            line-height: 371px;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;            
        }
        /* 分页条 */
        .talk-pager {
            margin-left: auto;
            margin-right:auto;
            margin-top: 20px;
            text-align: center;
        }
        /* 分页条按钮 */
        .talk-pager .btn {
            color: #337ab7;
            border-color: #A9CBEE;
        }
        .topage-input {
            width: 100px;
        }
        /* 子评论栏 */
        .talk-reply-area {
            border: 1px dashed #A9CBEE;
            margin: 5px 5px 5px 5px;
            padding: 0 10px;
            background: #eff4fb;
            position: relative;
            min-height: 10px;
        }
        .talk-reply-user-face {
            max-width: 48px;
            max-height: 48px;
            border: 1px solid #ccc;
            padding: 1px;
			flex: 34px;
        }
        .talk-reply {
            font-size: 14px;
            display: flex;
            margin: 10px 0;
        }
        .talk-reply-content-area {
            margin-left: 5px;
            margin-top: 2px;
            flex: 1;
        }
        .talk-reply-hr {
            margin: 2px 0;
            border-top-color: #A9CBEE;
            border-top-style: dashed;
        }
        /* 子评论栏 收起回复 */
        .talk-reply-collapse {
            position: absolute;
            right: -1px;
            top: -21px;
            border: 1px dashed #a9cbee;
            width: 100px;
            text-align: center;
            border-bottom-style: none;
            border-radius: 10px 0 0 0;
            background-color: #eff4fb;
			color: #337ab7;			
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
			user-select:none;    							
        }
        .talk-reply-collapse:hover, .talk-reply-collapse:focus {
            text-decoration: none;
			color: #a9cbee;
			cursor: pointer;
        }
        /* 子评论栏 分页*/
        .talk-reply-pager {
            padding: 5px 0;
            color: #337ab7;
        }
        .talk-reply-pager span {
            padding: 2px 3px;
        }
        .talk-reply-pager span:hover, .talk-reply-pager span:focus {
            text-decoration: none;
			color: #a9cbee;
			cursor: pointer;
        }      
        .talk-reply-footer {
            text-align: right;
            line-height: 12px;
            margin-top: 15px;
        }
        .talk-reply-date {
            color: #999;
            font-size: 12px;  
        }
        .talk-reply-input-area {
            height: 50px;
            display: flex;
            align-items: center;
        }
        .talk-reply-input {
            height: 30px;
            margin: 9px 0;
            text-indent: 10px;
            flex: 1;     
        }
        .talk-reply-button {
            font-size: 12px;
            line-height: 16px;
            margin-left: 10px;
            height: 30px;
            width: 95px;    
        }
	</style>
  </head>
  <body>
    <div class="container">
        <div class="page-header">
            <h1>这里写帖子的标题</h1>
        </div>
        <div class="row talk">
            <div class="col-md-2 talk-user-area">
                <img class="talk-user-face" src="./img/1.jpg" />
                <div class="talk-user-name"><a href="#">管理员</a></div>
                <hr class="talk-hr" />
                <div class="talk-user-detile">
                    <div class="talk-user-left-detile">
                        <div>发帖数：</div>
                        <div>回帖数：</div>
                        <div>最后登录于：</div>
                        <div>注册于：</div>
                    </div>
                    <div class="talk-user-right-detile">
                        <div>3</div>
                        <div>4</div>    
                        <div>50分钟前</div>
                        <div>2012/05/25</div>            
                    </div>
                </div>
            </div>
            <div class="col-md-10 talk-area">
                <div class="row talk-header">
                    <span class="talk-header-start">发布于: 2015-05-16 21:15:33</span>
                    <span class="talk-header-end">楼主</span>
                </div>
                <div class="row talk-content">
                    我是内容 我是内容 我是内容 我是内容 我是内容 很多内容 很多内容 很多内容
                </div>
                <div class="talk-reply-area">
                    <div class="talk-reply-collapse">收起回复</div>
                    <div class="talk-reply">
                        <img class="talk-reply-user-face" src="img/1.jpg" />
                        <div class="talk-reply-content-area">
                            <a href="#">管理员:</a>
                            <span>心疼的给自己暖贴 </span>
                            <div class="talk-reply-footer">
                                <span class="talk-reply-date">2012-05-12 06:50:12</span>
                            </div>
                        </div>
                    </div>
                    <hr class="talk-reply-hr"/>
                    <div class="talk-reply">
                        <img class="talk-reply-user-face" src="img/1.jpg" />
                        <div class="talk-reply-content-area">
                            <a href="#">管理员:</a>
                            <span>心疼的给自己暖贴 </span>
                            <div class="talk-reply-footer">
                                <span class="talk-reply-date">2012-05-12 06:50:12</span>
                            </div>                                
                        </div>
                    </div>  
                    <hr class="talk-reply-hr"/>    
                    <div class="talk-reply-input-area">  
                        <input class="talk-reply-input" type="text" placeholder="请输入内容..." />
                        <button class="btn btn-default talk-reply-button">我也说一句</button>
                    </div> 
                    <hr class="talk-reply-hr"/>                        
                    <div class="talk-reply-pager">
                        <span>首页</span>
                        <span>上一页</span>
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                        <span>5</span>
                        <span>下一页</span>
                        <span>尾页</span>
                    </div>                      
                </div>  

                <div class="row talk-footer">
                    <span class="talk-footer-start"></span>
                    <div class="talk-footer-end"></div>
                </div>
            </div>        
        </div>
      
        
        
        
        
        
        
        
        
        
        
        
        <div class="talk-pager">
            <a class="btn btn-default disabled">上一页</a>
            <a class="btn btn-default">1</a>
            <a class="btn btn-default">2</a>
            <a class="btn btn-default active">3</a>
            <a class="btn btn-default">下一页</a>
            <input id="topage-target-btn" class="btn btn-default topage-input" type="text" placeholder="跳转到..." name="topage" />
            <a id="topage-btn" style="display:none" class="btn btn-default">跳转到哪里呢...</a>
        </div>
        <hr class="note-editer-hr"/>
        <div class="row">
        <div class="col-md-12 talk-editer">
            <textarea name="text" class="summernote" id="contents"></textarea>
            <div class="talk-editer-cover" style="display: none;">
                <div class="talk-editer-cover-msg">发 帖 前 请 先 <a href="#">登 录</a></div>
            </div>
        </div>
      </div>
    </div>

    <script src="js/jquery-2.2.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/summernote.js"></script>
    <script type="text/javascript" src="lang/summernote-zh-CN.js"></script>
    <script> 
    $(function() {
       
		$('.talk-reply-collapse').click(function() {
			$(this).siblings().toggle();
		});
		
		$('#topage-target-btn').focus(function() {
            $('#topage-target-btn').attr('placeholder', '');
		});
		
        $('#topage-target-btn').blur(function() {
            $('#topage-target-btn').attr('placeholder', '跳转到...')
        });
        
		$('#topage-target-btn').change(function() {
			if(/^\d+$/.test($(this).val())) {
                $('#topage-btn').show();
				$('#topage-btn').text('跳转到第' + parseInt($(this).val()) + '页');
			} else {
                $('#topage-btn').hide();
                $('#topage-btn').text('跳转到哪里呢...');
                $('#topage-target-btn').val('');
            }
		});
		
		$('#topage-target-btn').keydown(function(event) {
			if(event.which === 13) {
				// 执行翻页操作
			}
		});
	
        $('.summernote').summernote({
            height: 300,
            lang: 'zh-CN',
        });
		
        $('[contenteditable]').each(function() {
            try { document.execCommand("AutoUrlDetect", false, false); } catch (e) {}
            
            $(this).on('paste', function(e) {
                e.preventDefault();
                var text = null;
            
                if(window.clipboardData && clipboardData.setData) {
                    text = window.clipboardData.getData('text');
                } else {
                    text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('');
                }
                if (document.body.createTextRange) {    
                    if (document.selection) {
                        textRange = document.selection.createRange();
                    } else if (window.getSelection) {
                        sel = window.getSelection();
                        var range = sel.getRangeAt(0);
                        var tempEl = document.createElement("span");
                        tempEl.innerHTML = "&#FEFF;";
                        range.deleteContents();
                        range.insertNode(tempEl);
                        textRange = document.body.createTextRange();
                        textRange.moveToElementText(tempEl);
                        tempEl.parentNode.removeChild(tempEl);
                    }
                    textRange.text = text;
                    textRange.collapse(false);
                    textRange.select();
                } else {
                    document.execCommand("insertText", false, text);
                }
            });
        });      
    });

    /*
    <div class="note-btn-group btn-group" style="float: right;">
        <button type="button" class="note-btn btn btn-default btn-sm btn-fullscreen" tabindex="-1" title="" data-original-title="全屏" style="font-weight: bold;line-height: 18px;">
            发送
        </button>
    </div>
    */
    </script>
  </body>
</html>
